<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--<meta name="referrer" content="no-referrer"/>-->
	<meta name="referrer" content="never">
	<meta name="active" th:content="${info.attrs.get('active')}">
	<meta name="platform" th:content="${info.platform}">
	<title th:text="${info.name == null}?'': ${info.name} + '--正在播放'">播放</title>
	<link rel="stylesheet" type="text/css" href="/css/search.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="/css/play.css">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/i18n/defaults-zh_CN.min.js"></script>
	<script src="/frame/js/broadcast.js"></script>
</head>
<script src="/js/hash.js"></script>
<script src="/js/Util.js"></script>
<script src="/js/suggestBox.js"></script>
<script >
	if (!util.os.isPc) {
		var link = document.createElement("link");
		link.setAttribute("rel", "stylesheet");
		link.setAttribute("type", "text/css");
		link.setAttribute("href", "/css/play_phone.css");
		document.head.appendChild(link);
	}
	var video = {
		end: function (){
			var next = $(active).parent().next();
			if (next.length == 0){
				next = $(active).parents("ul").find("li").get(0);
				if ( util.isNullString(next)){
					return;
				}
			}
			next = $(next).find("a").get(0);
			Hash.hashPath("/play", {index: $(next).attr("index")});
		},
		reload: function(){
			if (null == active || active.length == 0){
				window.location.reload();
			}
			else{
				changeActive(active);
			}
		}
	}

	var channelId = new Date().getTime() + '' + parseInt(Math.random()*1000);
	// 创建半双工广播
	var broadcastChannel = new HalfDuplexBroadcast(channelId);
	// 创建处理器
	var handler = new Handler("objectProxy", broadcastChannel);
	var proxyHandler = new ObjectProxyHandler(handler);
	// 绑定对象，供远程调用
	proxyHandler.binding("pvideo", new ObjectProxyBinding(video));

</script>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header phone_inline_block">
				<a class="navbar-brand">欢迎使用</a>
			</div>
			<div class="phone_inline_block phone_right" >
				<ul class="nav navbar-nav phone_hidden">
					<li><a href="javascript:void(0);" onclick="countDown(this);">定时关闭</a></li>
				</ul>
				<ul class="nav navbar-nav phone_left shareRoom">
					<li>
						<a th:if="${isLogin}" href="javascript:void(0);" onclick="util.redirect('/share/sharePlay' + location.search + location.hash)">放映室</a>
						<a th:if="${!isLogin}" href="javascript:void(0);" onclick="alert('该功能仅对登录用户开放')">放映室</a>
					</li>
				</ul>

				<div class="nav navbar-nav navbar-right phone_left">
					<a class="navbar-brand" th:if="${!isLogin}" href="/login"><i class="fa fa-user-o"><span style="padding: 0px 5px;">登录</span></i></a>
					<a class="navbar-brand" th:if="${isLogin}" href="/user/history">
							<span class="headimg headImgSize">
								<img class="fa headImgSize" th:src="${user.getImg()}"/>
							</span>
						<span class="headimgname" th:text="${user.getAccount()}">已登录</span>
					</a>
				</div>
				<!--<ul class="nav navbar-nav navbar-right">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							解析器 <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">blob</a></li>
							<li><a href="#">bozrc</a></li>
							<li><a href="#">ok</a></li>
							<li><a href="#">ckmov</a></li>
							<li><a href="#">laobandq</a></li>
							<li><a href="#">8090g</a></li>
						</ul>
					</li>
				</ul>-->
				<div class="navbar-form navbar-right select-user phone_hidden">
					<select class="selectpicker">
						<option th:each="parser:${parsers}" th:value="${parser.val}" th:checked="${parser.checked}" th:text="${parser.key}"></option>
					</select>
				</div>
				<div class="navbar-form navbar-right phone_hidden">
					<div style="position: relative;width: 240px">
						<div class="searchContentBox">
								<span class="searchBar">
									<input id="search" type="text" class="search" autocomplete="off"/>
								</span>
							<span class="searchBtnBox">
								<span id="searchBtn" class="searchBtn">
									<i class="fa fa-search"></i>
									<span>搜索</span>
								</span>
							</span>
						</div>
						<div class="suggestBox" id="suggestBox">
						</div>
					</div>

				</div>
			</div>
		</div>
	</nav>
	<div>
		<div class="iframeBox">
			<!--<div id="loading"></div>-->
			<!--<iframe th:src="@{'/player?url='+${info.url}+'&name='+${info.attrs.get('active')}+'&title='+${info.name} }" id="iframe" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>-->
			<iframe src="" id="iframe" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
		</div>
		<div id="box">
			<div class="baseBox">
				<span class="title" th:text="${info.name}">人世间</span>
				<div>
					<span style="color: white;" th:if="${info.desc != null}" >简介：</span>
					<div>
						<span style="color: darkgray;" th:text="${info.desc}" id="desc"></span>
					</div>
				</div>
				<div>
					<a class="toggleBtn" href="javascript:void(0);" onclick="slideToggle(this);">展开</a>
				</div>
			</div>
			<div>
				<div>
					<div class="text1">选集</div>
				</div>
				<ul class="videoInfos">
					<li th:each="videoInfo:${info.videoInfos}" th:attr="title=${videoInfo.desc},url=${videoInfo.url},platform=${videoInfo.platform}" th:classappend="${videoInfo.displayMode==1}?'':'block'">
						<a th:attr="index=${videoInfo.number}" th:text="${videoInfo.displayMode == 1?videoInfo.title:videoInfo.number}" href="javascript:void(0);"></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	Hash.addListener("/play", function(e, param){
		var index = param.get("index");
		changeActive($("#box a[index="+ index +"]").get(0));
	});

	function countDown(obj){
		let input = prompt("定时关闭", "1:00");
		if (util.isNullString(input)){
			return;
		}
		let index = input.indexOf(":");
		let hours = input.substring(0, index).trim();
		let mins = input.substring(index + 1).trim();
		shutdown( (hours*60 + mins*1) *60, obj);
	}

	initDescStatus();
	// 初始化播放器页面高度
	var active = null;
	var iframe = document.getElementById("iframe");

	if (util.os.isPc) {
		$(iframe).css("height", $("#box").css("height"));
	}
	else {
		var h = $(".navbar").height() + $(".iframeBox").height() + $(".baseBox").height() + $(".text1").height() + 15;
		$(".videoInfos").height(window.innerHeight - h);
	}

	if($("#box ul li").hasClass("block")){
		$("#box ul").css("margin-left", ($("#box ul").width() % 62)/2 + "px");
	}

	var activeIndex = Hash.getParameter().get("index");
	// 如果url未指明Index， 由设置meta[name=active]默认
	if (!activeIndex){
		activeIndex = $("meta[name=active]").attr("content");
		// 如果meta[name=active]未指明Index，则可能是部分url有问题，设为默认第一集;
		activeIndex = util.getDefault(activeIndex, "1", true);
		// 设置
		Hash.hashPath("/play", {index: activeIndex});
	}
	else{
		// url指明的直接调用，因为在刷新时url不会变化，不会触发
		changeActive($("#box a[index="+ activeIndex +"]").get(0));
	}

	// 简介部分开始
	// 简介部分展开/收起按钮事件
	function slideToggle( obj ){
		if (obj.innerText.trim() === "展开"){
			obj.innerText = "收起";
			$("#desc").removeClass("desc");
		}
		else{
			obj.innerText = "展开";
			$("#desc").addClass("desc");
		}
	}
	function initDescStatus(){
		$("#desc").removeClass("desc");
		$(".toggleBtn").css("display", "none");
		// 初始化简介收起状态
		var desc = document.getElementById("desc");
		var rects = desc.getClientRects();
		// 超过5行显示按钮，限制最大显示5行
		if (rects.length > util.os.isPc?5:3){
			$(".toggleBtn").css("display", "inline");
			$("#desc").addClass("desc");
		}
		// 简介部分结束
	}

	// 正在播放剧集切换
	function changeActive(target){
		if (active != null){
			$(active).removeClass("active");
		}
		$( target ).addClass("active");
		active = target;
		var p = $(target).parent();
		if (!iframe.src){
			iframe.setAttribute("src", "");
		}
		iframe.src = "/player?url="+$(p).attr("url") + "&name="+$( target ).attr("index") +"&title="+$(".title").text() +"&parser="+$(".selectpicker").find("option:selected").val() + "&platform=" +  $("meta[name=platform]").attr("content") + "&channelId=" + channelId;
		if (!util.isNullString($(p).attr("title"))){
			$("#desc").text($(p).attr("title"));
			initDescStatus();
		}
	}

	// 剧集按钮点击切换活跃状态
	$("#box").delegate("li a", "click", function(e){
		var index = $( e.currentTarget ).attr("index");
		if (Hash.getParameter().get("index") == index){
			video.reload();
			return;
		}
		Hash.hashPath("/play", {index: index});
	});
	$(".selectpicker").on("changed.bs.select", function (e, val){
		video.reload();
	});

	var tipsBox = {};
	var searcher = {};
	SuggestBox({
		rootDom: $("#suggestBox"),
		activeClass: "activeSuggestItem",
		onChange: function(old ,newDom){
			searcher.text($(newDom).text());
		},
		onSelected: function(selected){
			searcher.search($(selected).text());
		}
	}, tipsBox);

	Search({
		dom: $("#search"),
		focus: () => tipsBox.show(),
		blur: () => tipsBox.hide(),
		input: (e) => suggest($(e.target).val()),
		submit: function(text) {
			tipsBox.hide();
			if (!util.isNullString(text)){
				util.redirect("/search?key=" + text);
			}
		}
	}, searcher);

	function suggest(key){
		$.get("/suggest?key="+key , "", function (result){
			var suggestBox = document.getElementById("suggestBox");
			if (result.code != 0){
				return;
			}
			var data = result.data;
			if (searcher.text() != decodeURI(data.key)){
				return;
			}
			suggestBox.innerHTML = "";
			for(var i = 0, l = data.list.length; i < l; i ++){
				var item = data.list[i];
				var li = util.createTag("div", "suggestItem");
				li.setAttribute("key", item);
				li.setAttribute("index", i);
				li.innerHTML = item;
				suggestBox.appendChild(li);
			}
		})
	}

	// 定时关闭
	(function (payload){
		var shutdown = -1;
		payload.shutdown = function ( time, container){
			function format(t){
				if (t<10){
					return "0"+t;
				}
				return t;
			}
			function formatTime(t){
				var hours = parseInt(t / 3600);
				t = t%3600;
				var mins = parseInt(t / 60);
				var second = t%60;
				return format(hours) + ":" + format(mins) + ":" + format(second);
			}
			function exec(){
				time -= 1;
				if (time < 0){
					clearInterval(shutdown);
					shutdown = -1;
					window.close();
				}
				container.innerText = formatTime(time);
			}
			if (shutdown != -1){
				clearInterval(shutdown);
			}
			shutdown = setInterval(exec, 1000);
		}
	})(window);
</script>
</html>